<template>
  <section class="chart-container">
    <div class="c_header">
      <span>
        <span class="demonstration">欢迎您，</span>
        <el-dropdown trigger="click">
          <span class="el-dropdown-link" style="color:#26a2ff">
            {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item>我的消息</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
      <span>注册时间：{{resdate}}</span>
      <span @click="exit" style="cursor:pointer">[退出登录]</span>
    </div>
    <tongji :headTitle="headTitle"></tongji>
  </section>
</template>


<script>
import tongji from '~/components/common/tongji.vue';

export default {
  data() {
    return {
      headTitle: '生产统计',
      username: localStorage.getItem('username'),
      resdate: localStorage.getItem('resdate'),
    };
  },
  components: {
    tongji,
  },
  methods: {
    exit() {
      this.$confirm('确认注销登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '注销成功!',
        });
        this.$router.push('login');
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.c_header
  width 100%
  height 60px
  background #fff
  line-height 60px
  padding 0 45px
  box-shadow 0px 1px 5px #ccc;
  span
    &:nth-child(2)
      margin-left 20px
      color #ccc
    &:nth-child(3)
      float right
      color #26a2ff
.el-breadcrumb
  height 60px
  line-height 60px
</style>
